<template>
  <div>
    <form class="form-inline">
      <div class="form-group">
        <label for="exampleInputName2">名字</label>
        <input type="text" class="form-control" v-model="name" id="exampleInputName2" placeholder="你的名字" />
      </div>
      <div class="form-group">
        <label for="exampleInputEmail2">邮箱</label>
        <input type="email" class="form-control" v-model="email" id="exampleInputEmail2" placeholder="1221@qq.com" />
      </div>
      <button type="submit" class="btn btn-default" @click.prevent='add'>发送用户信息</button>
    </form>
  </div>
</template>

<script>
export default{
  props: {
    adds: {
      type: Function,
      required: true
    }
  },
  data () {
    return {
      name: '',
      email: ''
    }
  },
  methods: {
    add () {
      // 检查输入合法性
      const name = this.name.trim()
      const email = this.email.trim()
      if (!name || !email) {
        alert('姓名和email不能为空')
        return
      }
      // 合法
      const i = {
        name,
        email
      }
      console.log(i)
      // 3
      this.adds(i)
      // 4 清除输入
      this.name = ''
      this.email = ''
      console.log(this.name + '  ' + this.email)
    }
  }
}
</script>
<style></style>
